<template>
  <div class="page">
    <div class="shujutop">
      <div class="shujuchunk">
        <div class="shujuone">
          <div class="datanum">{{todaydhjf}}</div>
          <div class="jifentext">当日兑换积分</div>
        </div>
      </div>
      <div class="shujuchunk">
        <div class="shujuone">
          <div class="datanum">{{monthdhjf}}</div>
          <div class="jifentext">当月兑换总积分</div>
        </div>
      </div>
      <div class="shujuchunk">
        <div class="shujuone">
          <div class="datanum">{{yeardhjf}}</div>
          <div class="jifentext">当年兑换积分</div>
        </div>
      </div>
      <div class="shujuchunk">
        <div class="shujuone">
          <div class="datanum">{{jfgff}}</div>
          <div class="jifentext">积分共发放</div>
        </div>
      </div>
    </div>
    <div class="shujutop">
      <div class="shujuchunk">
          <div class="shujuone">
            <div class="datanum">{{ydhjf}}</div>
            <div class="jifentext">已兑换积分</div>
          </div>
        </div>
        <div class="shujuchunk">
          <div class="shujuone">
            <div class="datanum">{{yearffjf}}</div>
            <div class="jifentext">年发放积分</div>
          </div>
        </div>
        <div class="shujuchunk">
          <div class="shujuone">
            <div class="datanum">{{monthffjf}}</div>
            <div class="jifentext">月发放积分</div>
          </div>
        </div>
        <div class="shujuchunk">
          <div class="shujuone">
            <div class="datanum">{{yyjfyfsl}}</div>
            <div class="jifentext">已有积分用户数量</div>
          </div>
        </div>
    </div>


      <div class="jifendata">
          <div class="jifentitle">积分持有数据</div>
       <div style="display:flex">
        <div class="echartjifen">
             <jifenecharts/>
           </div>
        <!-- 下右表格 -->
      <div class="tablejifen">
        <el-table
          :data="newList"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          header-cell-style="background-color: #898989;color:#f6f6f6" >
          <el-table-column
            prop="jfd"
            label="积分"
            width="150">
          </el-table-column>
          <el-table-column
            prop="total"
            label="积分分段人数"
            width="180">
          </el-table-column>
          <el-table-column
            prop="totals"
            label="该分段共计发放">
          </el-table-column>
        </el-table>
       </div>
       </div>
      </div>



  </div>
</template>
<script>
import jifenecharts from './echarts/jifenecharts.vue'
export default {
  components: {
    jifenecharts
  },
  data() {
    return {
      datanumList:{},
      todaydhjf:"",//当日兑换积分
      monthdhjf:"",//当月兑换总积分
      yeardhjf:"",//当年兑换积分
      jfgff:"",//积分共发放
      ydhjf:"",//已兑换积分
      yearffjf:"", //年发放积分
      monthffjf:"",//月发放积分
      yyjfyfsl:"",//已有积分用户数量
      tableData: [],
      newList:[]
    }
  },
  mounted() {
     this.getData()
     this.getjffd()
  },
  methods: {
    getData() {
      this.$http.post("/index.php/api/dtsjcx").then(res => {
        if (res.code == 200) {
          this.datanumList = res.data;
          this.todaydhjf=this.datanumList.todaydhjf[0].total
          this.monthdhjf=this.datanumList.monthdhjf[0].total
          this.yeardhjf=this.datanumList.yeardhjf[0].total
          this.jfgff=this.datanumList.jfgff[0].total
          this.ydhjf=this.datanumList.ydhjf[0].total
          this.yearffjf=this.datanumList.yearffjf[0].total
          this.monthffjf=this.datanumList.monthffjf[0].total
          this.yyjfyfsl=this.datanumList.yyjfyfsl[0].total
        }
      })
    },

    getjffd(){
      const data = {
        page:1,
        pagesize:4
      }
      this.$http.post("/index.php/api/jffd",data).then(res => {
        if (res.code == 200) {
          for(var key in res.data){
            this.tableData.push(res.data[key])
          }
          this.tableData.forEach(item => {
            this.newList.push(item[0])
          });
        }
      })
    },
    tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'warning-row';
        }
        return '';
      }
  }
} 

</script>
<style>
  .el-table .warning-row {
    background: #e7e7e7 !important;
  }
  .el-table__row{
  background-color: #cbcbcb !important;
  margin-bottom: 6px;
}
.el-table .cell{
  font-weight: 700;
  font-size: 18px;
}
</style>
<style scoped>
 .page{
  padding: 100px 55px;
 }
 .shujutop{
  width: 100%;
  display: flex;
 }
 .shujuchunk{
  position: relative;
   width: 280px;
   height: 150px;
   border-radius: 10px;
   background-color: #efefef;
   margin-right: 20px;
   margin-bottom: 20px;
 }
 .shujuone{
  position: absolute;
  bottom: 15px;
  right: 25px;
  text-align: right;
 }
 .datanum{
  font-size: 36px;
  color: #000;
  font-weight: 700;
  margin-bottom: 15px;
 }
 .jifentext{
  font-size: 18px;
  font-weight: 400;
 }
 .jifendata{
  width: 100%;
  padding: 20px 0;
  background-color: #efefef;
  margin-right: 20px;
 }
 .jifentitle{
   padding-left: 30px;
   padding-bottom: 15px;
   font-size:18px;
   border-bottom: 1px solid #000;
 }
 .echartjifen{
  padding-left: 30px;
  padding-top: 20px;
 }
.tablejifen{
  width: 500px;
  margin-left: 20px;
  padding-top: 20px;
}
</style>